/**
 * 组件测试模块
 * Ant Design组件在各主题下的展示和测试
 */

import React from 'react';
import { Card, Table, Button, Form, Input, Select, DatePicker, Switch, Slider, Rate, Typography, Row, Col, Space, Progress, Tag, Avatar, Badge } from 'antd';
import { UserOutlined, LockOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;
const { Option } = Select;

const ComponentTests: React.FC = () => {
  // 表格数据
  const tableData = [
    { key: '1', name: '张三', age: 28, city: '北京', status: 'active' },
    { key: '2', name: '李四', age: 32, city: '上海', status: 'inactive' },
    { key: '3', name: '王五', age: 25, city: '广州', status: 'active' },
    { key: '4', name: '赵六', age: 30, city: '深圳', status: 'pending' },
  ];

  // 表格列配置
  const tableColumns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '城市',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusConfig = {
          active: { color: 'green', text: '活跃' },
          inactive: { color: 'red', text: '非活跃' },
          pending: { color: 'orange', text: '待定' },
        };
        const config = statusConfig[status as keyof typeof statusConfig];
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
  ];

  return (
    <div>
      <Paragraph>
        这里展示了Ant Design组件在当前主题下的渲染效果，
        可以切换不同主题查看组件的适配情况。
      </Paragraph>

      {/* 表格组件 */}
      <Card title="表格组件" style={{ marginBottom: 16 }}>
        <Table
          columns={tableColumns}
          dataSource={tableData}
          pagination={{ pageSize: 5 }}
          size="middle"
        />
      </Card>

      {/* 表单组件 */}
      <Card title="表单组件" style={{ marginBottom: 16 }}>
        <Form layout="vertical">
          <Row gutter={16}>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="用户名" name="username">
                <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="密码" name="password">
                <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="城市" name="city">
                <Select placeholder="请选择城市">
                  <Option value="beijing">北京</Option>
                  <Option value="shanghai">上海</Option>
                  <Option value="guangzhou">广州</Option>
                  <Option value="shenzhen">深圳</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="生日" name="birthday">
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="启用通知" name="notification" valuePropName="checked">
                <Switch />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Form.Item label="评分" name="rating">
                <Rate />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item>
            <Space>
              <Button type="primary">提交</Button>
              <Button>重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      {/* 按钮组件 */}
      <Card title="按钮组件" style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]}>
          <Col xs={24} sm={12} md={8}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>基础按钮</Text>
              <Space wrap>
                <Button type="primary">主要按钮</Button>
                <Button>默认按钮</Button>
                <Button type="dashed">虚线按钮</Button>
                <Button type="text">文本按钮</Button>
                <Button type="link">链接按钮</Button>
              </Space>
            </Space>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>状态按钮</Text>
              <Space wrap>
                <Button danger>危险按钮</Button>
                <Button loading>加载中</Button>
                <Button disabled>禁用按钮</Button>
                <Button ghost>幽灵按钮</Button>
              </Space>
            </Space>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>图标按钮</Text>
              <Space wrap>
                <Button icon={<SearchOutlined />}>搜索</Button>
                <Button icon={<SettingOutlined />} />
                <Button type="primary" icon={<UserOutlined />}>
                  用户
                </Button>
              </Space>
            </Space>
          </Col>
        </Row>
      </Card>

      {/* 数据展示组件 */}
      <Card title="数据展示组件" style={{ marginBottom: 16 }}>
        <Row gutter={16}>
          <Col xs={24} sm={12} md={8}>
            <Card size="small" title="进度条">
              <Space direction="vertical" style={{ width: '100%' }}>
                <Progress percent={30} />
                <Progress percent={50} status="active" />
                <Progress percent={70} status="exception" />
                <Progress percent={100} />
              </Space>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Card size="small" title="标签">
              <Space wrap>
                <Tag>标签一</Tag>
                <Tag color="blue">蓝色标签</Tag>
                <Tag color="green">绿色标签</Tag>
                <Tag color="orange">橙色标签</Tag>
                <Tag color="red">红色标签</Tag>
                <Tag color="purple">紫色标签</Tag>
              </Space>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Card size="small" title="头像和徽章">
              <Space>
                <Avatar icon={<UserOutlined />} />
                <Avatar>U</Avatar>
                <Badge count={5}>
                  <Avatar shape="square" icon={<UserOutlined />} />
                </Badge>
                <Badge dot>
                  <Avatar shape="square" icon={<UserOutlined />} />
                </Badge>
              </Space>
            </Card>
          </Col>
        </Row>
      </Card>

      {/* 输入组件 */}
      <Card title="输入组件">
        <Row gutter={16}>
          <Col xs={24} sm={12} md={8}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>输入框</Text>
              <Input placeholder="基本输入框" />
              <Input.Search placeholder="搜索输入框" />
              <Input.TextArea placeholder="文本域" rows={3} />
            </Space>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>选择器</Text>
              <Select placeholder="请选择" style={{ width: '100%' }}>
                <Option value="option1">选项一</Option>
                <Option value="option2">选项二</Option>
                <Option value="option3">选项三</Option>
              </Select>
              <DatePicker placeholder="选择日期" style={{ width: '100%' }} />
            </Space>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>其他控件</Text>
              <div>
                <Text>滑块：</Text>
                <Slider defaultValue={30} />
              </div>
              <div>
                <Text>评分：</Text>
                <Rate defaultValue={3} />
              </div>
              <div>
                <Text>开关：</Text>
                <Switch defaultChecked />
              </div>
            </Space>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default ComponentTests;
